<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/shouye.css">
    <link rel="stylesheet" href="./css/login.css">

</head>

<body>
    <div id="header_container">
        <!--新版的login页面没有头部 -->
        <div id="logo">
            <a href="" id="home" title="聚美优品"></a>
            <div class="header_logo_box">
                <a href="" rel="nofollow" class="top_link lightning" target="_blank"></a>
                <a href="" rel="nofollow" class="top_link gild" target="_blank"></a>
                <a href="" rel="nofollow" class="top_link credit" target="_blank"></a>
            </div>
        </div>
    </div>

    <div class="sign">
        <div class="loginWrap loginWrapVerify" style="height: 445px; margin-bottom: 50px;">
            <div class="loginBoardWrap">
                <div class="loginImage"></div>
                <div class="loginBord">
                    <div class="loginTit">
                        <div class="tosignup">还没有聚美帐号？<a href="">30秒注册</a></div>
                        <h1><strong>登录聚美</strong></h1>
                    </div>
                    <div class="radio_wrapper">
                        <span>
                            <input name="method" type="radio" rel="login-dynamic-form" value="dynamic"
                                id="radio_dynamic">
                            <label for="radio_dynamic">
                                手机动态密码登录
                            </label>
                        </span>
                        <span>
                            <input name="method" type="radio" rel="login-user-form" value="normal" id="radio_normal">
                            <label for="radio_normal">
                                普通登录
                            </label>
                        </span>
                    </div>
                    <!-- <form id="login-dynamic-form" action="" style="display: block;">
                        <input style="display:none" type="text" name="fakeusernameremembered">
                        <input style="display:none" type="password" name="fakepasswordremembered">
                        <div class="textbox_ui user">
                            <input type="text" placeholder="已注册的手机号码" id="dynamic_mobile" autofocus=""
                                autocomplete="off" value="">
                            <div class="focus_text">请输入11位手机号码</div>
                            <div class="invalid" style="display: none;">
                                <i></i>
                                <div class="msg"></div>
                            </div>
                        </div>
                        <div class="gtVerifyWrap" style="display: none!important;">
                            <div class="textbox_ui">
                                <p class="gtHeader">请拖动下方的滚动条，完成拼图验证</p>

                                <div id="dynamic_gt_verify"></div>
                                <div class="invalid">
                                    <i></i>
                                    <div class="msg"></div>
                                </div>
                            </div>
                        </div>
                        <div class="verityWrap">
                            <div class="dynamic_pass_wrap line">
                                <div class="textbox_ui dynamic_pass pass">
                                    <input type="text" placeholder="动态密码" id="dynamic_password" autocomplete="off">
                                    <div class="focus_text">请点击获取手机动态密码</div>
                                    <div class="hint"></div>
                                    <div class="invalid">
                                        <i></i>
                                        <div class="msg"></div>
                                    </div>
                                </div>
                                <a href="javascript:;" id="getPhoneCode" class="phonecode"><strong>获取手机动态密码</strong></a>
                            </div>
                            <p>
                                <label for="dynamic_auto_login">
                                    <input type="checkbox" id="dynamic_auto_login" checked="">
                                    &nbsp;自动登录
                                </label>
                            </p>
                                <input class="loginbtn submit_btn" type="submit" value="登 录"style=" display: block;width: 100%;">
                </form> -->

                    <form id="login-user-form" method="post" action="" style="display: block;">
                        <input style="display:none" type="text" name="fakeusernameremembered">
                        <input style="display:none" type="password" name="fakepasswordremembered">
                        <div class="textbox_ui user">
                            <input type="text" placeholder="已验证手机/邮箱/用户名" id="username" autofocus="" autocomplete="off"
                                value="">
                            <div class="focus_text">请输入登录名，登录名可能是您的手机号、邮箱或用户名</div>
                            <div class="invalid" style="display: none;">
                                <i></i>
                                <div class="msg"></div>
                            </div>
                        </div>
                        <div class="textbox_ui pass">
                            <input type="password" placeholder="密码" id="password" autocomplete="off">
                            <div class="focus_text">请输入您的密码，您的密码可能为字母、数字或符号的组合</div>
                            <div class="invalid" style="display: none;">
                                <i></i>
                                <div class="msg">您输入的密码错误，请核对后重新输入或<a href="">找回密码</a></div>
                            </div>
                        </div>
                        <p>
                            <a href="" class="fr">忘记密码?</a>
                            <label for="auto_login">
                                <input type="checkbox" id="auto_login" checked="">
                                &nbsp;自动登录
                            </label>
                        </p>
                        <input class="loginbtn submit_btn" type="submit" value="登 录"
                            style=" display: block;width: 100%;" id="btnlogin">
                        <div id="errorMsg"></div>
                    </form>

                    <div class="iconAccout">
                        <div>你也可以使用以下帐号登录</div>
                        <p>
                            <a href="" class="a1" title="QQ">QQ</a>
                            <a href="" class="a2" title="支付宝">支付宝</a>
                            <a href="" class="a3" title="新浪微博">新浪微博</a>
                            <a href="" class="a4" title="360">360</a>
                            <a href="" class="a5" title="百度">百度</a>
                            <!-- <span>更多<i class=""></i></span> -->
                        </p>
                        <!-- <p class="icon-p" style="display: none;">
                            <a href="" class="a6" title="微信">微信</a>
                            <a href="" class="a7" title="人人">人人</a>
                            <a href="" class="a9" title="团800">团800</a>
                        </p> -->
                    </div>
                    <div class="shadow_l"></div>
                    <div class="shadow_r"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer_copyright">
        <div class="footer_copyright_link main">
            <p class="footer_copy_con">
                COPYRIGHT © 2010-2019 北京创锐文化传媒有限公司 JUMEI.COM 保留一切权利。
                客服热线：400-011-0888
                <br>
                京公网安备 11010102001226
                | <a href="" target="_blank" rel="nofollow">京ICP证111033号</a>
                | <a href="">食品经营许可证</a>
                | <a href="" target="_blank" rel="nofollow">营业执照</a>
                | <a href="" target="_blank" rel="nofollow">ICP许可证</a>
                | <a href="" target="_blank" rel="nofollow">出版物经营许可证</a>
                | <a href="" target="_blank" rel="nofollow">第二类医疗器械经营备案凭证</a>
                | <a href="" target="_blank" rel="nofollow">网络食品交易第三方平台提供者备案信息表</a>
                | <a href="" target="_blank" rel="nofollow">增值电信业务经营许可证</a>
            </p>
            <p>
                <a href="javascript:void(0)" class="footer_copy_logo logo01" rel="nofollow"></a>
                <a href="" target="_blank" class="footer_copy_logo logo02" rel="nofollow"></a>
                <a href="javascript:void(0)" class="footer_copy_logo logo03" rel="nofollow"></a>
                <a href="javascript:void(0)" class="footer_copy_logo logo04" rel="nofollow"></a>
                <a href="" target="_blank" class="footer_copy_logo logo05" rel="nofollow"></a>
                <a href="" class="footer_logo6" rel="nofollow"></a>
            </p>
        </div>
    </div>

    <script src="./js/ajax.js"></script>
    <script>
        // const loginUserForm = document.querySelector('#login-user-form')
        // console.log(loginUserForm);
        // const loginDynamicForm = document.querySelector('#login-dynamic-form')
        // function dynamic() {
        //     loginUserForm.style.display = 'none'
        //     loginDynamicForm.style.display = 'block'
        // }
        // function ordinary() {
        //     loginDynamicForm.style.display = 'block'
        //     loginUserForm.style.display = 'none'
        // }
        const btnlogin = document.querySelector('#btnlogin')
        const username = document.querySelector('#username')
        const possword = document.querySelector('#possword')
        btnlogin.addEventListener('click', function (e) {
            const event = window.event || e
            e.preventDefault()
            // console.log(username.value);
            // console.log(password.value);
            ajax({
                url:'http://localhost/6week/jumei/php/login.php',
                type:'post',
                dataType:'json',
                data:{
                    "username":username.value,
                    "password":password.value
                },
                success:function(res){
                    // console.log(res);
                    if(res.code ==1){
                        location.href = 'http://localhost/6week/jumei/shouyu.html'
                    }else{
                        alert(res.msg)
                        
                    }
                }
            })
        })
    </script>
</body>

</html>